import React, {Component} from 'react';
import {Row, Col, Button, Empty, Spin, message} from 'antd';

import DataEchart from '~/component/DataEchart';
import AddComparisonView from './AddComparsionView';

class RealtimeStatisticsView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isVisiable: false
        };
    }

    // 导出明细
    onDownloadReport = () => {
        const {statisticsId, onDownloadReport} = this.props;
        onDownloadReport(statisticsId);
    };

    // 添加对比
    onAddComparison = () => {
        const {dataSource} = this.props;
        if (dataSource.length) {
            this.setState({
                isVisiable: true
            });
        }
        else {
            message.warning('请先查询作为原始数据');
        }
    };

    // 点击确认添加
    onOk = parmas => {
        this.props.onOk(parmas);
        this.setState({
            isVisiable: false
        });
    };

    // 点击取消
    onCancel = () => {
        this.setState({
            isVisiable: false
        });
    };

    render() {
        const {isloading, dataSource, dataMapOptions, data, onClear, statisticsId} = this.props;
        const {isVisiable} = this.state;
        return (
            <div>
                <Row>
                    <Col span={24} style={{textAlign: 'right'}}>
                        <Button style={{marginTop: 20}} onClick={this.onDownloadReport}>
                            明细导出
                        </Button>
                    </Col>
                </Row>
                <Spin spinning={isloading} tip="数据加载中...">
                    {
                        dataSource.length
                            ? <DataEchart key={121} data={dataMapOptions} />
                            : <Empty imageStyle={{height: 70}} image={Empty.PRESENTED_IMAGE_SIMPLE} />
                    }
                </Spin>
                <Row>
                    <Col span={24} style={{textAlign: 'left', marginTop: 15}}>
                        <Button type="primary" htmlType="submit" onClick={this.onAddComparison}>
                            + 添加对比
                        </Button>
                        <Button style={{marginLeft: 8}} onClick={onClear}>
                            清除
                        </Button>
                    </Col>
                </Row>
                <AddComparisonView
                    isVisiable={isVisiable}
                    onOk={this.onOk}
                    onCancel={this.onCancel}
                    data={data}
                    statisticsId={statisticsId}
                />
            </div>
        );
    }
}

export default RealtimeStatisticsView;
